<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ryu Traverse</title>
<script src="../lib/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
	// traverse를 사용하여 6번째 요소의 색상 변경
	$('li').eq(5).css('color', '#00ffff');
	
	// traverse 의 filter를 사용하여 3의 배수번째
	$('#mnt>li').filter(function(index){
		return index%3 == 0;
	}).css('color', '#ff0000');
	
	// traverse 의 slice 를 사용하여서 2~4까지의 항목에 border를 지정
	$('#mnt>li').slice(2,4).css('border','1px solid #747474');
});
</script>
</head>
<body>
	<h3>Traverse Example</h3>
	<ul id="mnt">
		<li>백두산
		<li>금강산
		<li>한라산
		<li>설악산
		<li>치악산
		<li>아차산
		<li>지리산
		<li>북한산
		<li>내장산
		<li>청계산
		<li>뒷산
		<li>앞산
		<li>옆산
	</ul>
</body>
</html>